<template>
  <div class="personalmsg">
    <!-- 检索框 -->
    <div class="allsearch">
      <section class="search-content">
        <el-row :gutter="4" type="flex" justify="start">
          <el-col :span="24">
            <el-date-picker
              v-model="listQuery.daterange"
              :picker-options="picker"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="|"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width:300px"
            />
            <el-input
              v-model="listQuery.sendPerson"
              style="width:220px;"
              placeholder="发信人用户名"
              @keyup.enter.native="handleFilter"
            />
            <el-input
              v-model="listQuery.content"
              style="width:220px;"
              placeholder="私信内容关键词"
              @keyup.enter.native="handleFilter"
            />
            <el-button type="primary" size="medium" @click="handleFilter">搜索</el-button>
            <el-button size="medium" type="info" @click="clearParams">清空</el-button>
          </el-col>
        </el-row>
      </section>
    </div>
    <el-table :data="eduxcloudMessageList" border fit highlight-current-row style="width: 100%;margin-top:15px;">
      <el-table-column min-width="10%" align="center" label="发信人">
        <template slot-scope="scope">
          <el-button type="text" @click="showEduxcloudUser(scope.row.sendId)">{{ scope.row.sendPerson }}</el-button>
        </template>
      </el-table-column>
      <el-table-column min-width="15%" align="center" label="收信人">
        <template slot-scope="scope">
          <el-button type="text" @click="showEduxcloudUser(scope.row.receiveId)">{{ scope.row.receivePerson }}</el-button>
        </template>
      </el-table-column>
      <el-table-column min-width="15%" align="center" label="内容">
        <template slot-scope="scope">
          <span>{{ scope.row.content }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="10%" align="center" label="发送时间">
        <template slot-scope="scope">
          <span>{{ scope.row.sendTime }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" />

    <sub-dialog :visiabledialog="visiabledialog" :dialog-data="dialogData" @changeVisiable="changeVisiable"/>
  </div>
</template>
<script>
import SubDialog from '@/components/Dialog' // 个人信息弹窗
import Pagination from '@/components/Pagination' // 分页组件
import { getEduxcloudMessagePager, getEduxcloudUserById } from '@/api/user/user' // 数据接口
import { getTenantId } from '@/utils/auth'
export default {
  components: { Pagination, SubDialog },
  data() {
    return {
      visiabledialog: false,
      dialogData: {},
      eduxcloudMessageList: [],
      formLabelWidth: '120px',
      listQuery: {
        daterange: [],
        sendPerson: '',
        content: '',
        page: 1,
        limit: 20
      },
      picker: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      total: 0
    }
  },
  mounted() { this.getEduxcloudMessageListData() },
  methods: {
    // dialog子组件触发的函数
    changeVisiable(val) {
      this.visiabledialog = Boolean(val)
    },
    // 查看按钮
    showEduxcloudUser(id) {
      this.visiabledialog = true
      getEduxcloudUserById(id).then(response => {
        this.dialogData = response.data.eduxcloudUser
      })
    },
    // 接口获取数据
    getEduxcloudMessageListData() {
      const params = {}
      if (this.listQuery.daterange !== undefined && this.listQuery.daterange != null) {
        params.startDate = this.listQuery.daterange[0]
        params.endDate = this.listQuery.daterange[1]
      }
      params.sendPerson = this.listQuery.sendPerson
      params.content = this.listQuery.content
      params.page = this.listQuery.page
      params.limit = this.listQuery.limit
      params.tenantId = getTenantId()
      getEduxcloudMessagePager(params).then(response => {
        this.eduxcloudMessageList = response.data.items
        this.total = response.data.total
      })
    },
    handleSizeChange(val) {
      this.listQuery.page = 1
      this.listQuery.limit = val.value
      this.getEduxcloudMessageListData()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val.value
      this.getEduxcloudMessageListData()
    },
    // 筛选
    handleFilter() {
      this.getEduxcloudMessageListData()
    },
    clearParams() {
      this.listQuery.daterange = []
      this.listQuery.sendPerson = ''
      this.listQuery.content = ''
      this.getEduxcloudMessageListData()
    }
  }
}
</script>

<style lang="scss">
.personalmsg {
  padding: 14px 20px 0 20px;
  .allsearch {
    margin-top: 0px;
    padding: 0;
    .search-content {
      width: 100%;
    }
  }
  .el-dialog {
    border-radius: 6px;
  }
}
</style>
